<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        ref="topruleForm"
      >
        <el-form-item label="售后单号:">
          <el-input
            v-model="formInline.aftersales_id"
            placeholder="请输入售后单号"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单号:">
          <el-input
            v-model="formInline.order_id"
            placeholder="请输入订单号"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户名:">
          <el-input
            v-model="formInline.user_name"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="gauge">
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="onReset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="text item">
      <!-- <span class="gauge">订单收入金额:222223333 元</span> -->

      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        max-height="550"
      >
        <el-table-column
          type="index"
          align="center"
          label="序号"
          :index="indexMethod"
          width="70"
        >
        </el-table-column>
        <el-table-column
          prop="aftersales_id"
          align="center"
          label="售后单号"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="order_id"
          align="center"
          label="订单号"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="create_time"
          align="center"
          label="申请时间"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="payment_code" align="center" label="支付方式">
          <template slot-scope="scope">
            {{
              scope.row.payment_code == "materialspay"
                ? "余额支付"
                : scope.row.payment_code == "wechatpay"
                ? "微信支付"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column prop="nickname" align="center" label="用户名称">
        </el-table-column>
        <!-- <el-table-column prop="mobile" align="center" label="用户手机号">
        </el-table-column> -->
        <el-table-column prop="nums" align="center" label="商品数量">
        </el-table-column>
        <el-table-column prop="order_amount" align="center" label="订单金额">
        </el-table-column>
        <!-- 1退款 2退款退货 3换货 4退部分款 -->
        <el-table-column prop="type" align="center" label="售后方式">
          <template slot-scope="scope">
            {{
              scope.row.type === 1
                ? "退款"
                : scope.row.type === 2
                ? "退款退货"
                : scope.row.type === 3
                ? "换货"
                : scope.row.type === 4
                ? "部分退款"
                : ""
            }}
          </template>
        </el-table-column>
        <!-- 1未处理 2已同意 3已拒绝 -->
        <el-table-column prop="status" align="center" label="状态">
          <template slot-scope="scope">
            {{
              scope.row.status == 1
                ? "未处理"
                : scope.row.status == 2
                ? "已同意"
                : scope.row.status == 3
                ? "已拒绝"
                : scope.row.status == 4
                ? "已提交审核"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)"
              >查看</el-button
            >
            <!-- v-if="
                scope.row.status == 1 ||
                scope.row.status == 3 ||
                scope.row.status == 4
              " -->
            <el-button
              size="mini"
              type="success"
              @click="handleEdit1(scope.row)"
              v-if="scope.row.status == 1"
              >去处理</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- //分页器 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 50, 100, 300]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose1"
    >
      <el-card class="box-card" :data="tableData2">
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          class="formBox"
        >
          <p>商家信息</p>
          <el-form-item label="商家名称:" class="leftBox">
            <div>
              {{
                tableData2.seller_info ? tableData2.seller_info.shop_name : ""
              }}
            </div>
          </el-form-item>
          <el-form-item label="负责人姓名:" class="leftBox">
            <div>
              {{
                tableData2.seller_info
                  ? tableData2.seller_info.store_manager_name
                  : ""
              }}
            </div>
          </el-form-item>
          <el-form-item label="联系方式:" class="leftBox">
            <div>
              {{
                tableData2.seller_info
                  ? tableData2.seller_info.store_manager_phone
                  : ""
              }}
            </div>
          </el-form-item>
        </el-form>
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          class="formBox"
        >
          <p>用户信息</p>
          <el-form-item label="用户名:" class="leftBox">
            <div>
              {{ tableData2.user_info ? tableData2.user_info.name : "" }}
            </div>
          </el-form-item>
        </el-form>
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          class="formBox"
        >
          <p>收货人信息</p>
          <el-form-item label="收货人:" class="leftBox">
            <div>
              {{
                tableData2.person_info ? tableData2.person_info.person_name : ""
              }}
            </div>
          </el-form-item>
          <el-form-item label="联系方式:" class="leftBox">
            <div>
              {{
                tableData2.person_info
                  ? tableData2.person_info.person_phone
                  : ""
              }}
            </div>
          </el-form-item>
          <el-form-item label="收货地址:" class="leftBox">
            <div>
              {{
                tableData2.person_info
                  ? tableData2.person_info.person_address
                  : ""
              }}
            </div>
          </el-form-item>
          <el-form-item label="支付方式:" class="leftBox">
            <div>
              {{
                tableData2.person_info
                  ? tableData2.person_info.payment_code == "materialspay"
                    ? "余额支付"
                    : tableData2.person_info.payment_code == "wechatpay"
                    ? "微信支付"
                    : ""
                  : ""
              }}
            </div>
          </el-form-item>
        </el-form>
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          class="formBox"
        >
          <p>配送信息</p>
          <el-form-item label="配送方式:" class="leftBox">
            <div>
              {{
                tableData2.person_info
                  ? tableData2.person_info.delivery_method == 1
                    ? "商家配送"
                    : tableData2.person_info.delivery_method == 2
                    ? "用户自提"
                    : ""
                  : ""
              }}
            </div>
          </el-form-item>
        </el-form>
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          class="formBox"
        >
          <p>发票信息</p>
          <el-form-item label="是否开发票:" class="leftBox">
            <div>
              {{
                tableData2.person_info
                  ? tableData2.person_info.fapiao_status == 0
                    ? "否"
                    : tableData2.person_info.fapiao_status == 1
                    ? "是"
                    : ""
                  : ""
              }}
            </div>
          </el-form-item>
        </el-form>
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          class="formBox"
        >
          <p>售后信息</p>
          <!-- <div class="gongJu">
            {{ 15 }}
          </div> -->
          <el-form-item label="售后单号:" class="leftBox">
            <div>
              {{
                tableData2.aftersale ? tableData2.aftersale.aftersales_id : ""
              }}
            </div>
          </el-form-item>
          <el-form-item label="售后类型:" class="leftBox">
            <div>
              {{
                tableData2.aftersale
                  ? tableData2.aftersale.type === 1
                    ? "退款"
                    : tableData2.aftersale.type === 2
                    ? "退款退货"
                    : tableData2.aftersale.type === 3
                    ? "换货"
                    : tableData2.aftersale.type === 4
                    ? "部分退款"
                    : ""
                  : ""
              }}
            </div>
          </el-form-item>
          <el-form-item label="换货原因:" class="leftBox">
            <div>
              {{ tableData2.aftersale ? tableData2.aftersale.reason : "" }}
            </div>
          </el-form-item>
          <el-form-item label="申请时间:" class="leftBox">
            <div>
              {{ tableData2.aftersale ? tableData2.aftersale.ctime : "" }}
            </div>
          </el-form-item>
          <el-form-item label="问题描述:" class="leftBox">
            <div>
              {{ tableData2.aftersale ? tableData2.aftersale.description : "" }}
            </div>
          </el-form-item>
          <el-form-item label="凭证:" class="leftBox">
            <div id="videoBox">
              <el-image
                class="img"
                v-for="(item, index) in imgList"
                :key="index"
                style="width: 100px; height: 100px"
                :src="imgHeader + item"
                fit="cover"
              ></el-image>
            </div>
          </el-form-item>
        </el-form>

        <el-form
          :label-position="labelPosition"
          label-width="100px"
          class="formBox"
        >
          <p>售后商品信息</p>
          <el-table
            border
            style="width: 100%"
            class="caiLiaoInfo"
            :data="tableData2.goods_list"
          >
            <el-table-column label="商品名称" align="center" prop="name">
            </el-table-column>
            <el-table-column label="商品单价" align="center" prop="sell_price">
            </el-table-column>
            <el-table-column label="购买数量" align="center" prop="nums">
            </el-table-column>
            <el-table-column
              label="商品总价"
              align="center"
              prop="goods_amount"
            >
            </el-table-column>
            <el-table-column label="商品状态" align="center" prop="is_del">
              <template slot-scope="scope">
                {{
                  scope.row.is_del == 0
                    ? "正常"
                    : scope.row.is_del == 1
                    ? "已删除"
                    : scope.row.is_del == 2
                    ? "下架"
                    : scope.row.is_del == 3
                    ? "申请上架"
                    : ""
                }}
              </template>
            </el-table-column>
            <el-table-column
              label="换货数量"
              align="center"
              prop="exchange_nums"
            >
            </el-table-column>
            <el-table-column label="是否截断" align="center" prop="truncation">
              <template slot-scope="scope">
                {{
                  scope.row.truncation == 1
                    ? "两米截断"
                    : scope.row.truncation == 2
                    ? "自定义尺寸"
                    : scope.row.truncation == 3
                    ? "不截断"
                    : ""
                }}
              </template>
            </el-table-column>
            <el-table-column
              label="截断备注"
              align="center"
              prop="truncation_note"
            >
            </el-table-column>
          </el-table>
          <el-form-item
            v-show="look"
            label="不可换货商品:"
            class="leftBox"
            id="imgBox"
          >
            <!-- <div id="videoBox">
              <el-image
                class="img"
                v-for="(iten, index) in 2"
                :key="index"
                style="width: 100px; height: 100px"
                src=""
                fit="cover"
              ></el-image>
            </div> -->
            <!-- <div class="unlodBox">
              <el-upload
                class="upload-demo"
                action
                :http-request="uploadFile"
                ref="upload"
                :limit="fileLimit"
                :on-remove="handleRemove"
                :file-list="fileList"
                :on-exceed="handleExceed"
                :before-upload="beforeUpload"
                :show-file-list="false"
                :headers="headers"
                :multiple="multiple"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过5M
                </div>
              </el-upload>
              <el-image
                v-if="imageUrl"
                style="width: 100px; height: 100px"
                :src="imageUrl"
                fit="cover"
              ></el-image>
            </div> -->

            <div class="unlodBox">
              <el-upload
                class="upload-demo"
                action
                :http-request="uploadFiles2"
                ref="upload"
                :on-remove="handleRemove2"
                :file-list="fileList2"
                :on-exceed="handleExceed"
                :before-upload="beforeUpload"
                :show-file-list="false"
                :headers="headers"
              >
                <!-- <el-image
                  v-if="imageUrl"
                  class="imageGood"
                  :src="imageUrl"
                  style="width: 360px; height: 180px"
                ></el-image>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过5M
                </div>
              </el-upload>
              <div class="imageBox">
                <ul class="el-upload-list el-upload-list--picture-card">
                  <draggable v-model="imgShowList2">
                    <li
                      v-for="(item, index) in imgShowList2"
                      :key="index"
                      class="el-upload-list__item is-success animated"
                    >
                      <img
                        :src="imgHeader + item"
                        alt=""
                        class="el-upload-list__item-thumbnail"
                      />
                      <i class="el-icon-close"></i>
                      <span class="el-upload-list__item-actions">
                        <!-- 预览 -->
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreviewFileDetail1(item)"
                        >
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <!-- 删除 -->
                        <span
                          class="el-upload-list__item-delete"
                          @click="handleRemoveFileDetail1(index)"
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </li>
                  </draggable>
                </ul>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-show="look" label="备注:" class="leftBox">
            <el-input
              class="inputBox"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="Remarks"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          class="formBox"
        >
          <p>协商记录</p>
          <el-steps
            :space="200"
            :active="1"
            align-center
            finish-status="success"
          >
            <el-step title="买家发起售后"></el-step>
            <el-step title="商家/平台处理中"></el-step>
          </el-steps>
          <el-form-item label="协商时间:" class="leftBox">
            {{ tableData2.aftersale ? tableData2.aftersale.utime : "" }}
          </el-form-item>
          <!-- <el-form-item label="售后单号:" class="leftBox">
            <div>{{ 21 }}</div>
          </el-form-item>
          <el-form-item label="售后类型:" class="leftBox">
            <div>{{ 22 }}</div>
          </el-form-item>
          <el-form-item label="换货原因:" class="leftBox">
            <div>{{ 23 }}</div>
          </el-form-item>
          <el-form-item label="申请时间:" class="leftBox">
            <div>{{ 24 }}</div>
          </el-form-item> -->
        </el-form>
        <!-- 预览弹出层 -->
        <el-dialog :visible.sync="dialogVisibleDetail" class="imageDia">
          <el-image :src="imgHeader + dialogImageDetailUrl"></el-image>
        </el-dialog>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="backtrack">返回</el-button>
        <el-button type="warning" @click="handleSubmit" v-show="look"
          >提交用户审核</el-button
        >
        <el-button type="danger" @click="handleRefuse" v-show="look"
          >拒绝</el-button
        >
        <el-button type="success" @click="handleAgree" v-show="look"
          >同意</el-button
        >
      </span>
    </el-dialog>
    <!-- 同意的弹出框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisibleAgree"
      width="30%"
      :before-close="handleClose"
    >
      <span>是否确认换货</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleAgree = false">取 消</el-button>
        <el-button type="primary" @click="agree">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 拒绝的弹出框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisibleRefuse"
      width="30%"
      :before-close="handleClose2"
    >
      <p class="refuseText">拒绝换货原因说明</p>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="reason"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelRefund">取 消</el-button>
        <el-button type="primary" @click="refuse">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>
  
<script>
import {
  goodsOrder,
  getWJD_and_WFH_num,
  jiancaiOrderDetails,
  uploadFilec,
  uploadFiles,
} from "../../../../utils/api";
import {
  getProductAfterSales,
  getProductAfterSalesDetail,
  ReviewAfterSales,
} from "../../../../utils/main";
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      // fileLimit: 10,
      fileType: ["png", "jpg", "jpeg"],
      fileList: [],
      fileList2: [],
      imgHeader: this.Global.imgHeader,

      headers: { "Content-Type": "multipart/form-data" },
      multiple: true,
      imageUrl1: "",
      imageUrl: "",
      aftersales_id: "",
      order_id: "",
      user_name: "",
      labelPosition: "right",
      Remarks: "",
      reason: "",
      textarea: "",
      status: "", //订单状态  1正常 2完成 3取消
      ship_status: "", // 发货状态1 未接单  2接单未发货  3已发货  4已送达
      pay_status: "", //支付状态  1=未付款 2=已付款 3=部分付款 4=部分退款 5=已退款
      weijiedanNums: 0,
      weifahuoNums: 0,
      loading: false,
      token: sessionStorage.getItem("token"),
      dialogVisible: false,
      dialogVisibleAgree: false,
      dialogVisibleRefuse: false,
      formInline: { aftersales_id: "", order_id: "", user_name: "" },
      seller_id: sessionStorage.getItem("seller_id"),
      // seller_id: 8,
      tableData: [],
      tableData2: [],
      imgList: [],
      imgShowList2: [],
      dialogImageDetailUrl: "",
      dialogVisibleDetail: false,
      look: false,
      user_mobile: "",
      //查看
      form: [
        {
          name: "",
        },
      ],
      //分页器
      total: 0,
      limit: 10,
      page: 1,
      total1: 0,
      limit1: 10,
      page1: 1,
      currentPage: 1,
    };
  },
  methods: {
    // 提交用户审核
    handleSubmit() {
      ReviewAfterSales(
        this.token,
        this.tableData2.aftersale.aftersales_id,
        1,
        4,
        this.seller_id,
        this.reason,
        this.imgShowList2,
        this.Remarks
      ).then((res) => {
        if (res.data.status == true) {
          this.getList();
          this.dialogVisible = false;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 同意售后确定按钮
    agree() {
      ReviewAfterSales(
        this.token,
        this.tableData2.aftersale.aftersales_id,
        1,
        2,
        this.seller_id,
        "",
        "",
        ""
      ).then((res) => {
        if (res.data.status == true) {
          this.getList();
          this.dialogVisibleAgree = false;
          this.dialogVisible = false;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 拒绝收受确定按钮
    refuse() {
      ReviewAfterSales(
        this.token,
        this.tableData2.aftersale.aftersales_id,
        1,
        3,
        this.seller_id,
        this.reason,
        "",
        ""
      ).then((res) => {
        if (res.data.status == true) {
          this.getList();
          this.dialogVisibleRefuse = false;
          this.dialogVisible = false;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    uploadFiles2(item) {
      this.$message("文件上传中........");
      //上传文件的需要formdata类型;所以要转
      uploadFiles(item.file).then((res) => {
        if (res.data.status != false || res.data.id != null) {
          console.log(res);
          res.data.data.saveurl; //半截
          res.data.data.weburl; //全拼
          this.imgShowList2.push(res.data.data.saveurl);
          // this.imageUrl1 = res.data.data.saveurl;
          // this.imageUrl = res.data.data.weburl;
          this.fileList2.push(item.file); //成功过后手动将文件添加到展示列表里
          // let i = this.fileList1.indexOf(item.file);
          this.handleSuccess();
        }
      });
    },
    handlePictureCardPreviewFileDetail1(file) {
      this.dialogImageDetailUrl = file;
      this.dialogVisibleDetail = true;
    },
    handleRemoveFileDetail1(index) {
      // if (this.imgShowList2.length == 1) {
      //   this.$message.error("至少有一张图片");
      //   return;
      // }
      this.imgShowList2.splice(index, 1);
      this.fileList2.splice(index, 1); //删除上传的文件
    },
    // uploadFile(item) {
    //   this.$message("文件上传中........");
    //   //上传文件的需要formdata类型;所以要转
    //   uploadFilec(item.file).then((res) => {
    //     if (res.data.status != false || res.data.id != null) {
    //       res.data.data.saveurl; //半截
    //       res.data.data.weburl; //全拼
    //       this.imageUrl = res.data.data.weburl;
    //       this.imageUrl1 = res.data.data.saveurl;
    //       this.fileList.push(item.file); //成功过后手动将文件添加到展示列表里
    //       let i = this.fileList.indexOf(item.file);
    //       this.handleSuccess();
    //     }
    //   });
    // },
    //上传成功后的回调
    handleSuccess() {
      this.$message({
        message: "上传成功",
        type: "success",
      });
      // this.handleClosedelete();
    },
    handleRemove() {},
    handleRemove2() {},
    beforeUpload(file) {
      if (file.type != "" || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 1; //这里做文件大小限制
        //如果大于50M
        if (!isLt5M) {
          this.$message.error("上传文件大小不能超过 1MB!");
          return false;
        }
        //如果文件类型不在允许上传的范围内
        if (this.fileType.includes(FileExt)) {
          return true;
        } else {
          this.$message.error("上传文件格式不正确!");
          return false;
        }
      }
    },
    // handleClose(i) {
    //   this.fileList.splice(i, 1); //删除上传的文件
    // },
    //超出文件个数的回调
    handleExceed() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
      return;
    },
    // 以上是上传图片
    chooseStatus(index) {
      console.log(index);
      if (index == 0) {
        this.status = "";
        this.pay_status = "";
        this.ship_status = "";
      }
      if (index == 1) {
        //未支付
        this.status = 1;
        this.pay_status = 1;
        this.ship_status = 1;
      }
      if (index == 2) {
        //待接单
        this.status = 1;
        this.pay_status = 2;
        this.ship_status = 1;
      }
      if (index == 3) {
        //代发货
        this.status = 1;
        this.pay_status = 2;
        this.ship_status = 2;
      }
      if (index == 4) {
        //已发货
        this.status = 1;
        this.pay_status = 2;
        this.ship_status = 3;
      }
      if (index == 5) {
        //已完成
        this.status = 2;
        this.pay_status = 2;
        this.ship_status = 4;
      }
      if (index == 6) {
        //已取消
        this.status = 3;
        this.pay_status = "";
        this.ship_status = "";
      }
      this.getList();
    },
    async getList() {
      this.loading = true;
      let res = await getProductAfterSales(
        this.token,
        this.seller_id,
        this.aftersales_id,
        this.order_id,
        this.user_name,
        this.user_mobile,
        this.page,
        this.limit
      );
      if (res.data.status) {
        this.tableData = res.data.data.data || [];
        // if (this.formLabelAlign.seller_img != "") {
        //   this.imageUrl = this.formLabelAlign.seller_img;
        // } else {
        //   this.imageUrl = this.formLabelAlign.logo;
        // }
        // console.log(this.imageUrl, "图片");
        // console.log(this.imageUrl, "图片");
        this.total = res.data.data.count;
        // console.log(this.total, shouchu);
        let timer = setTimeout(() => {
          this.loading = false;
          clearTimeout(timer);
        }, 400);
      } else {
        if (res.data.msg == "token失效,请重新进行登录") {
          this.$router.push("/materilsLogin");
        }
        if (res.data.msg == "此账号没有权限") {
          this.$message.error(res.data.msg);
          this.loading = false;
        }
        let timer = setTimeout(() => {
          this.$message.error(res.data.msg);
        }, 5000);
      }
    },
    //查询
    onSubmit(row) {
      this.aftersales_id = this.formInline.aftersales_id;
      this.order_id = this.formInline.order_id;
      this.user_name = this.formInline.user_name;
      this.page = 1;
      this.getList();
    },
    //重置
    onReset() {
      this.formInline = {
        aftersales_id: "",
        order_id: "",
        user_name: "",
      };
      this.aftersales_id = "";
      this.order_id = "";
      this.user_name = "";
      this.getList();
    },
    // 序号排序
    indexMethod(index) {
      if (this.total < this.limit) {
        return this.total - index;
      } else {
        return this.total - (this.page - 1) * this.limit - index;
      }
    },
    //详情
    handleEdit(row) {
      this.look = false;
      getProductAfterSalesDetail(
        this.token,
        this.seller_id,
        row.aftersales_id
      ).then((res) => {
        if (res.data.status) {
          this.dialogVisible = true;
          this.tableData2 = res.data.data;
          this.imgList = [];
          if (this.tableData2.aftersale) {
            this.tableData2.aftersale.images.forEach((item) => {
              this.imgList.push(item.image_id);
            });
          }
          //1, //配送方式 1商家配送 2用户自提
          // if (this.form.delivery_method == 1) {
          //   this.form.delivery_method_text = "商家配送";
          // }
          // if (this.form.delivery_method == 2) {
          //   this.form.delivery_method_text = "用户自提";
          // }

          //1原地卸货 2 电梯上楼 3 楼梯上楼
          // if (this.form.up_method == 1) {
          //   this.form.up_method_text = "原地卸货";
          // }
          // if (this.form.up_method == 2) {
          //   this.form.up_method_text = "电梯上楼";
          // }
          // if (this.form.up_method == 3) {
          //   this.form.up_method_text = "楼梯上楼";
          // }

          // if (this.form.payment_code == null) {
          //   this.form.payment_code_text = "未支付";
          // } else if (this.form.payment_code == "materialspay") {
          //   this.form.payment_code_text = "余额支付";
          // } else if (this.form.payment_code == "wechatpay") {
          //   this.form.payment_code_text = "微信支付";
          // }
        }
      });
    },
    // 去处理
    handleEdit1(row) {
      this.dialogVisible = true;
      this.look = true;
      getProductAfterSalesDetail(
        this.token,
        this.seller_id,
        row.aftersales_id
      ).then((res) => {
        if (res.data.status) {
          this.dialogVisible = true;
          this.tableData2 = res.data.data;
          this.imgList = [];
          if (this.tableData2.aftersale.status == 4) {
            this.imgShowList2.forEach((item, index) => {
              file1.push({ uid: index, name: item });
            });
            this.fileList2 = file1;
            this.Remarks = this.tableData2.aftersale.mark;
          }
          if (this.tableData2.aftersale) {
            this.tableData2.aftersale.images.forEach((item) => {
              this.imgList.push(item.image_id);
            });
          }
        }
      });
    },
    // 发货
    handleEdit2() {},
    // 取消订单
    handleEdit3() {},
    //关闭
    handleClose(done) {
      done();
    },
    handleClose1(done) {
      this.Remarks = "";
      this.imgShowList2 = [];
      done();
    },
    handleClose2(done) {
      this.reason = "";
      done();
    },
    //这是我自定义的移除事件
    handleClosedelete(i) {
      this.fileList.splice(i, 1); //删除上传的文件
    },
    //弹框序号
    // indexM(index) {
    // if (this.token < this.limit) {
    //   return this.total - index;
    // } else {
    //   return (
    //     this.total - (this.currentPage - 1) * this.limit - index
    //   );
    // }
    // },
    //返回
    backtrack() {
      this.Remarks = "";
      this.imgShowList2 = [];
      this.dialogVisible = false;
    },
    handleAgree() {
      this.dialogVisibleAgree = true;
    },
    handleRefuse() {
      this.dialogVisibleRefuse = true;
    },
    cancelRefund() {
      this.reason = "";
      this.dialogVisibleRefuse = false;
    },

    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      // console.log(`当前页: ${val}`);
      this.getList();
    },
    // handleSizeChange1(val) {
    //   console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange1(val) {
    //   console.log(`当前页: ${val}`);
    // },
  },
  mounted() {
    this.getList();
  },
};
</script>
  
<style scoped>
.text {
  font-size: 14px;
  padding-left: 0;
}
.el-table {
  padding-left: 0;
}

.modality {
  display: flex;
  width: 100%;
}

.modality .leftImg {
  width: 20%;
}

.modalityUser {
  display: flex;
  flex-direction: column;
  margin: 0 15px;
  width: 70%;
  justify-content: center;
}

.modalityUser .item {
  display: block;
  text-align: left;
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.demo-form-inline {
  display: flex;
}

.gauge {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/* 新的弹出层 */
.leftBox {
  margin-bottom: 15px;
}
.leftBox div {
  /* border: 1px solid rgb(175, 174, 174); */
  width: 300px;
  margin-left: 10px;
}
/* .formBox {
  box-shadow: 0px 0px 1px 1px rgb(172, 172, 172);
  margin-bottom: 20px;
  padding: 10px;
} */
.formBox p {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 700;
}
#videoBox {
  width: 100%;
  /* height: 200px; */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0;
  border: none;
  flex-flow: wrap;
}
#videoBox .img {
  width: 30%;
  height: 80%;
  padding-left: 0;
  border: none;
  margin-right: 10px;
  margin-bottom: 10px;
}
.formBox .gongJu {
  width: 80%;
  height: 100px;
  border: 1px solid gainsboro;
  padding: 10px;
  overflow: scroll;
}
.caiLiaoInfo {
  padding-left: 0;
  margin-bottom: 15px;
}
div {
  padding-left: 10px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
.el-steps {
  margin-bottom: 15px;
}
.refuseText {
  margin-bottom: 10px;
}
.inputBox {
  padding-left: 0;
  border: none;
}
#imgBox div {
  border: none;
  padding-left: 0;
}
</style>